<template>
  <div class="left-nav">
    <ul>
      <router-link to="/">
        <li>
          <i class="icon iconfont icon-iconset0315"></i>
          <div>收银</div>
        </li>
      </router-link>
      <!---->
        <router-link :to="'/hi1/'+'judy'">
          <li>
            <i class="icon iconfont icon-shop"></i>
            <div>店铺</div>
          </li>
        </router-link>




      <router-link :to="{name:'hi',params:{username:'jspang2'}}">
        <li>
          <i class="icon iconfont icon-hanbao"></i>
          <div>商品</div>
        </li>
      </router-link>


      <li>
        <i class="icon iconfont icon-huiyuan"></i>
        <div>会员</div>
      </li>

      <li>
        <i class="icon iconfont icon-shezhi"></i>
        <div>设置</div>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'leftNav',
  data:function () {
    return {
    }
  },
  methods:{

   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}


  .left-nav{
    color: #ffffff;
    font-size: 10px;
    height:100%;
    background: #1D8CE0;
    float: left;
    width: 5%;
  }
  .iconfont{
    font-size: 24px;
  }
  .left-nav ul{
    padding: 0;
    margin:0;
  }
  .left-nav li{
    list-style: none ;
    text-align: center;
    border-bottom: 1px solid #20a0ff;
    padding:10px;
  }
</style>
